<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#boxShade {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				background-color: rgba(0, 0, 0, 0.8);

			}

			/*遮罩图片居中显示*/
			.zhezhao {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			#boxShade * {

				color: #FFFFFF;
			}

			#boxShade span {
				float: right;
				display: block;
				margin-top: 20px;
				margin-right: 10px;
				padding: 10px;
				cursor: pointer;

			}
            #boxShade>div{
				position:absolute;
				width: 100px;
				height: 50px;
				top:0;
				right: 0;
			}
			#imgBox {
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="post-content">
			<img src="photos/img/I(01).jpg" style="width: 600px;height: 800px;" />
			<img src="photos/img/I(02).jpg" style="width: 600px;height: 800px;" />
			<img src="photos/img/I(03).jpg" style="width: 600px;height: 800px;" />
			<img src="photos/img/1.png"  />
		</div>
		<div id="boxShade">
		
			<img id="imgBox">
			<div>
				<span id="imgClose">X</span>
				<span id="imgBoost">O</span>			
			</div>
			
		</div>
	</body>
	<script language="javascript" type="text/javascript">
		//函数： 反复执行的代码块
		//全局只有一个对象，防止全局变量污染
		var itcast = {
			getElen: {
				tag: function(tag) {
					return document.getElementsByTagName(tag);
				},
				id: function(id) {
					return document.getElementById(id);
				},
				myClass: function(nd) {
					return document.getElementsByClassName(nd);
				}
			}
		}
		var postcontent = itcast.getElen.id("post-content");
		var boxShade = itcast.getElen.id("boxShade");
		var imgBox = itcast.getElen.id("imgBox");
		var imgBoost = itcast.getElen.id("imgBoost");

             
		function showdiv(src, w, h) {
			boxShade.style.display = "block";
			var fh = boxShade.offsetHeight;
			var fw = boxShade.offsetWidth;
			var gi=1;
			if (w < fw && h < fh) {
				imgBox.width = w;
				imgBox.height = h;		
			} else { //通常为电脑
				if (fh < fw) {
					if(h > fh && w < fw){
                    imgBox.height=gi*fh;
					imgBox.width=gi * fh* w/ h;		
					} else if (h<fh&&w>fw) {
                    imgBox.width = fw * gi;
					imgBox.height = gi * fw * h / w;
					} else {
						if(w<h){
							imgBox.height=gi*fh;
							imgBox.width=gi * fh* w/ h;
						}
						else{
							imgBox.width = fw * gi;
							imgBox.height = gi * fw * h / w;
						}

					}
				}
				//通常为手机
				else {
					if(h > fh && w < fw){
					imgBox.height=gi*fh;
					imgBox.width=gi * fh* w/ h;		
					} else if (h<fh&&w>fw) {
					imgBox.width = fw * gi;
					imgBox.height = gi * fw * h / w;
					} else {
						if(w<h){
							imgBox.height=gi*fh;
							imgBox.width=gi * fh* w/ h;
						}
						else{
							imgBox.width = fw * gi;
							imgBox.height = gi * fw * h / w;
						}
					
					}
				}

			}
		

			imgBox.src = src;
			imgBox.style.left=(fw-imgBox.width)/2+"px";
			imgBox.style.top=(fh-imgBox.height)/2+"px";
			

		}

		function hidediv() {
			boxShade.style.display = 'none';
		}


		boxShade.onclick = function(e) {
			hidediv();

		}
		//阻止冒泡
		function stopPropagation(e) {

			e = e || window.event;

			if (e.stopPropagation) { //W3C阻止冒泡方法 

				e.stopPropagation();

			} else {

				e.cancelBubble = true; //IE阻止冒泡方法 

			}

		}
		imgBox.onclick = function() {
			stopPropagation();
		}
		imgBoost.onclick = function() {
			stopPropagation();
		}
		postcontent.onclick = function(ev) {
			var eb = ev || window.event;
			var tg = ev.target || ev.srcElement;
			if (tg.nodeName.toLowerCase() == "img") {
				//获取盒子宽高
				boxShade.offsetHeight;
				boxShade.offsetWidth;
				
				// 图片地址
				var img_url = tg.currentSrc;
				// 创建对象
				var img = new Image();
				// 改变图片的src
				img.src = img_url;
				//加载完成执行
				img.onload = function() {
					showdiv(tg.currentSrc, img.width, img.height);
					
				}

				

				
			} else {

			}
		}

	</script>
</html>
